import React, {useState} from 'react'
import {
    StyleSheet,
    ScrollView,
    Text, View
} from 'react-native'
import theme from '../../config/theme'

function YearsSwiper({years}: { years: string[] }) {
    const [CurrentYear, setCurrentYear] = useState('全部')
    return (
        <View style={styles.classifyWarp}>
            <ScrollView
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                style={{paddingVertical: 10}}
            >
                {
                    Array.isArray(years) && years.map((item, index) => {
                        return (
                            <Text
                                key={index}
                                onPress={() => setCurrentYear(item)}
                                style={[styles.swiperSlide, CurrentYear === item ? styles.swiperSlideActive : null]}>
                                {item}
                            </Text>
                        )
                    })
                }
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    classifyWarp: {
        display: "flex",
        flexDirection: "row",
        alignItems: "center"
    },
    swiperSlide: {
        marginRight: 5,
        paddingHorizontal: 9,
        paddingVertical: 4,
        borderRadius: 15,
        fontSize: 14,
        color: theme.mainFontColor
    },
    swiperSlideActive: {
        backgroundColor: theme.mainBackgroundColor,
        color: theme.whiteColor
    }
})

export default YearsSwiper
